<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			bod y{
				width: 100%;
				height: 1000000000px;
				background-image: url(img/蜡笔小新.png);
				background-size: contain;
				/* 函数  cover   等比例放大图片    特点:原图按照比例放大存背景空间
				    [开发者:背景图大小是否等于背景空间]
				         contain   等比例缩放图片    特点:图片按照比例缩放存背景空间
						  [开发者:背景图等比例显示在背景空间]
				 */
				/* 背景附件---尺寸中存在cover或者contain */
				background-attachment: scroll;  /* 背景图    scroll不固定固定*/
			}
			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background: #ffff00;
				background-image: url(img/蜡笔小新.png);
			/* 问题:超大图-不显示  小图-显示 
			注意:背景空间大小,如果图小于背景空间---平铺
			*/
		      background-repeat: no-repeat; 
				/*no-repeat不平铺 repeat-x,y横,纵向平铺 */
				background-size: 30%;
				/* 背景尺寸属性值:数值px %|函数 cover  contain */
				/* 背景定位:前提背景空间大于背景图 关键字   center,left,right,top... */
				background-position: 80% 0;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus quas, beatae consequatur, atque, facere nemo temporibus illo et fugit cum quia amet quidem. Quaerat maiores fugiat, eos impedit ipsa ullam.
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo officiis cupiditate facere! Ducimus rem explicabo doloremque porro iusto ipsam incidunt quas veniam enim adipisci cupiditate illo facilis, distinctio neque minus?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, modi necessitatibus ab ipsam ad autem eius hic quia odio? Corporis magnam, porro cupiditate deserunt dicta similique consectetur assumenda placeat natus.
		<!--  html  img图片  引入一张图片,位置不可随意改变
		       css  背景图片  引入一张图片,位置可以随意改变
				子属性  background-color  背景颜色
				        background-image  背景图
						background-repeat    背景重复
						background-size    背景尺寸
						background-attachment   背景附件
						background-position    背景定位
				复合属性  background : background-image  background-color background-position
				                      background-size   background-repeat和background-attachment
			 简写方式:background :background-image  background-position|background-size background-repeat
				替代子属性:background-image ,background-color   background-repeat
				-->
				<div></div>
	</body>
</html>